<!DOCTYPE html>
<html>

<head>
  <title>图形编辑</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <script type="module" src="./serveconfig.js"></script>

	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		:root {
			--main-bg-color: #1b334d;
			--text-color: #black;
			--border-color: #808080;
			--canvas-bg-color: #B2B2B2;
			--link-color: #19c;
			--ruler-color: #B2B2B2;
			--icon-bg-color: #2086B6;
			--icon-bg-color-hover: #C8F05A;
			--input-color: #B2B2B2;
			--global-se-spin-input-width: 82px;
			--elix-thumbnail-height:80px;
			--elix-thumbnail-width:80px;
		}
		.ems_y{
			cursor: pointer;
		}
		svg foreignObject {
			-webkit-user-select: none;
			-moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
		}
		svg text {
			-webkit-user-select: none;
			-moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
		}
		svg text::selection {
			background: none;
		}
		body {
			overflow: hidden;
			background-color: lightgray;
			background-color: black;
			/*background-image: url("/static/pictool/images/svgbg.png");*/
		}

		.refreshPeriod{
			position:absolute;
			bottom:5px;
			right: 5px;
			height: 20px;
			width: 70px;
			font-size: 10px;
			color: rgb(117, 114, 114);
			-webkit-user-select: none;
			-moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
		}
		.freshtext{
			width: 10px;
			background-color: var(--main-bg-color);
			padding-left:3px;
			border:none ;
			outline: none;
			color:lightgray;
		}
		.secPosition{
			position:absolute;
			bottom:3px;
			right: 14px;
			height: 20px;
			width: 5px;
			font-size: 15px;
			color: rgb(117, 114, 114);
			-webkit-user-select: none;
			-moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
		}

			.svg_show {
				display: grid;
				/*grid-template-columns: 80px;*/
				grid-template-areas:
					"left main";
				font-size: 12px !important;
				background: var(--main-bg-color);
				font-family: Verdana, Helvetica, Arial;
				color: var(--text-color);
				user-select: text;
				width: 100%;
				height: 100%;
			}
			#tools_left {
				grid-area: left;
				border-right: 3px solid #72797A;
				overflow-y: unset;
				text-align: center;
				scrollbar-width: none; /* Firefox */
				height:100vh;
				width: 80px;
			}
			#tools_left .itemWrap{
				display: flex;
				flex-wrap:wrap;
				padding: 7px 7px;
			}
			#svg {
				grid-area: main;
				border-right: 3px solid #6a99a0;
				overflow: hidden;
				scrollbar-width: none; /* Firefox */
			}
			.whiteColor{
				color: white;
				}
			.loading_mar{
				top:300px
			}
			.ems text{
				width:100px;
			}
			@keyframes twinkle {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.5;
            }
        }
	</style>
	</head>

	<body id = "bodyHei" onUnload="" style="overflow: hidden;">
		<div id="svgShow" class="svg_show">
			<div id="svg" style="width:100%;height:100vh"></div>
		</div>
		<div  class="loading_mar" id="waitDiv">
		</div>
		<div class="refreshPeriod">刷新周期<input id="freshSec" type="text" value="2" class="freshtext" maxlength="1"  onfocus="this.select();"><span class="secPosition">s</span></div>
	</body>
	<script type="module">
		import SvgShow from  "./svgshow/svgshow_display.js"
		import serviceUrl from  "./serveconfig.js"
		var svgShow = new SvgShow(document.getElementById('svgShow'),serviceUrl,window.parent.showLeftPanel,false)
		svgShow.init()
    window.onload = function (){
      window.addEventListener("message",function (e){
        recieveData(e)
      })
    }
    const recieveData = (data)=>{
      if(data.data.type==='close'){
        svgShow.closeWork()
      }else if(data.data.type==='openDisplay'){
        svgShow.displayAccident(data.data.data)
      }
    }
	</script>
</html>
